﻿@inherits LayoutComponentBase
@using AntDesign
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@*<div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>*@

<Layout>
    <Sider Collapsible Collapsed=@collapsed NoTrigger OnCollapse="OnCollapse">

        @if (collapsed)
        {
            <div class="logo" />
        }
        else
        {
            <div class="logo-color" />
        }
        <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"1"})>
            <MenuItem Key="3" RouterLink="/">
                <Icon Style="font-size:20px" Type="global" Theme="outline" />
                <span>网关配置</span>
            </MenuItem>
        </Menu>
    </Sider>
    <Layout Class="site-layout">
        <Header Class="site-layout-background" Style="padding: 0;">
            @if (collapsed)
            {
                <Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
            else
            {
                <Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
            }
            <Icon Type="github" Theme="outline" Class="header-menu header-menu-first" OnClick="goGithub" />
            @*<Icon Type="safety" Theme="outline" Class="header-menu" OnClick="goHealthUI" />*@
        </Header>
        @*<_CookieConsentPartial />*@
        <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 88vh;">
            @Body
        </Content>
    </Layout>
</Layout>

<style>
    .trigger {
        font-size: 20px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

        .trigger:hover {
            color: #1890ff;
        }

    .logo-color {
        height: 40px;
        /*background: rgba(255, 255, 255, 0.2);*/
        background-image: url(../img/logo-color.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 10px;
    }

    .logo {
        height: 40px;
        /*background: rgba(255, 255, 255, 0.2);*/
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 10px;
    }

    .header-menu {
        font-size: 26px;
        line-height: 62px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
        float: right;
    }

        .header-menu:hover {
            color: #1890ff;
        }

    .header-menu-first {
        margin-right: 26px;
    }

    .site-layout .site-layout-background {
        background: #fff;
    }

    .ant-layout {
        height: 100%;
    }
</style>


@code{

    bool collapsed;

    void toggle()
    {
        collapsed = !collapsed;
    }

    void OnCollapse(bool isCollapsed)
    {
        Console.WriteLine($"Collapsed: {isCollapsed}");
    }

    async Task goGithub()
    {
        await JSRuntime.InvokeAsync<object>("open", "https://github.com/CacoCode/CodePlus.ApiGateway.Blazor", "_blank");
    }

    async Task goHealthUI()
    {
        await JSRuntime.InvokeAsync<object>("open", "/healthchecks-ui", "_blank");
    }

}